<!--
 * @Author: zhangxiangsheng 1026583651@qq.com
 * @Date: 2024-04-10 13:44:29
 * @LastEditors: zhangxiangsheng 1026583651@qq.com
 * @LastEditTime: 2024-04-25 15:51:37
 * @FilePath: \crm\pagesecharts\index\components2\card6.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<template>
  <view class="card">
    <view class="title u-flex u-flex-between">
      <view class="u-flex">
        <u--image
          :src="$z.imgsrc('6dea0e8c9f264899ae8160e76aa0f3f4.png')"
          width="36rpx"
          height="36rpx"
        ></u--image>
        <view class="text">合同成交概况</view>
      </view>

      <!-- <u-icon name="arrow-right" size="12" color="#999999"></u-icon> -->
    </view>
    <view class="title1">签约合同订单金额</view>
    <view class="u-flex u-flex-between jedd">
      <view class="l">
        <text style="font-size: 36rpx">￥</text>
        273,736.00
      </view>
      <view class="r">
        订单
        <text class="num">536</text>
        笔
      </view>
    </view>
    <view class="list">
      <view class="item" v-for="(item, index) in list" :key="index">
        <view class="text1">{{ item.text1 }}</view>
        <view class="text2">{{ item.text2 }}</view>
      </view>
    </view>
    <view style="width: 100%; height: 420rpx">
      <l-echart ref="chartRef" @finished="init"></l-echart>
    </view>
  </view>
</template>
<script>
  import * as echarts from "@/pagesecharts/lime-echart/static/echarts.min";
  import lEchart from "@/pagesecharts/lime-echart/components/l-echart/l-echart.vue";
  export default {
    components: {
      lEchart,
    },
    data() {
      return {
        option: {
          grid: {
            bottom: "16%",
            top: "10%",
          },
          color: ["rgba(220, 38, 38, 0.5)"],
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: ["3/1", "3/2", "3/3", "3/4", "3/5", "3/6", "3/7"],
            axisLine: {
              lineStyle: {
                color: "#a9a9a9",
                width: 1, //这里是为了突出显示加上的
              },
            },
            axisLabel: {
              //x轴文字的配置
              show: true,
              textStyle: {
                color: "#a9a9a9",
              },
            },
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              data: [120, 200, 150, 80, 70, 110, 130],
              type: "line",
              areaStyle: {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(220, 38, 38, 0.5)",
                  },
                  {
                    offset: 1,
                    color: "rgba(220, 38, 38, 0)",
                  },
                ]),
              },
            },
          ],
        },
        list: [
          {
            text1: "订单金额环比",
            text2: "23%",
          },
          {
            text1: "订单金额同比",
            text2: "23",
          },
          {
            text1: "订单数环比",
            text2: "23",
          },
          {
            text1: "订单数同比",
            text2: "23",
          },
        ],
      };
    },
    mounted() {
      // this.init();
    },
    methods: {
      async init() {
        const chart = await this.$refs.chartRef.init(echarts);
        chart.setOption(this.option);
      },
    },
  };
</script>
<style lang="scss" scoped>
  .card {
    margin: 14rpx 18rpx;
    background-color: #fff;
    border-radius: 8rpx;

    // padding: 0 24rpx;
    // padding-bottom: 16rpx;
    .title {
      font-size: 28rpx;
      font-weight: bold;
      height: 88rpx;
      padding: 0 24rpx;

      .text {
        padding-left: 12rpx;
        line-height: 1;
      }
    }

    .title1 {
      color: #838589;
      font-size: 24rpx;
      line-height: 32rpx;
      padding: 0 24rpx;
    }

    .jedd {
      height: 100rpx;
      padding: 0 24rpx;

      .l {
        font-size: 48rpx;
        font-weight: bold;
      }

      .r {
        font-size: 32rpx;
        color: #838589;

        .num {
          font-size: 36rpx;
          color: #171a1d;
          font-weight: bold;
          padding: 0 16rpx;
        }
      }
    }

    .list {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 0 24rpx;

      .item {
        width: calc(50% - 8rpx);
        background-color: #f4f6fa;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        // align-items: center;
        margin-bottom: 18rpx;
        // margin-top: 18rpx;
        height: calc(56 * 2rpx);
        border-radius: 8rpx;
        padding: 18rpx 20rpx;

        .text1 {
          color: #838589;
          font-size: 24rpx;
          line-height: 1;
        }

        .text2 {
          color: #171a1d;
          font-size: 28rpx;
          line-height: 1;
          font-weight: bold;
        }

        .text {
          // color: #171a1d;
          // font-size: 24rpx;
          // padding: 8rpx 0;
          // margin-bottom: 24rpx;
        }
      }
    }
  }
</style>
